<template>
    <div class="content">
      <div class="content-head">
        <el-form :inline="true" :model="formData" label-position="left">
          <el-form-item>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addEvent">新增</el-button>
            <el-button type="success" size="mini" icon="el-icon-menu" @click="methodTest">审批任务</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-table">
        <div class="table-main">
          <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" border highlight-current-row :max-height="tableMaxHeight" class="content-table-item">
            <el-table-column prop="requestNum" label="采购需求单号" align="center" width="150"></el-table-column>
            <el-table-column prop="stateName" label="状态" align="center" width="60"></el-table-column>
            <el-table-column prop="orderNumTypeName" label="关联单据类型" align="center" width="120"></el-table-column>
            <el-table-column prop="orderNum" label="关联单据编号" align="center" width="150"></el-table-column>
            <el-table-column prop="applicantName" label="申请人" align="center" width="100"></el-table-column>
            <el-table-column prop="applicationDate" label="申请日期" align="center" width="160"></el-table-column>
            <el-table-column prop="approverName" label="审批人" align="center" width="100"></el-table-column>
            <el-table-column prop="materialFields.code" label="物料编码" align="center" width="160"></el-table-column>
            <el-table-column prop="materialFields.name" label="物料名称" align="center" width="160"></el-table-column>
            <el-table-column prop="materialFields.standard" label="物料规格" align="center" width="80"></el-table-column>
            <el-table-column prop="materialFields.comp" label="单位" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].quantity" label="参考数量" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].num" label="申请数量" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].purchaseDate" label="要货日期" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].suggestedSupplier" label="建议供应商" align="center" width="150"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].stockQuantity" label="当前库存数量" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].purchaseQuantity" label="采购数量" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].receiptQuantity" label="收货数量" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].inventoryQuantity" label="入库数量" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].qualifiedQuantity" label="来料合格数量" align="center" width="120"></el-table-column>
            <el-table-column prop="requestMaterialEntities[0].unqualifiedQuantity" label="来料不合格数量" align="center" width="120"></el-table-column>
            <el-table-column prop="approvalStatusName" label="审批状态" align="center" width="100"></el-table-column>
            <el-table-column prop="approvalTime" label="审批时间" align="center" width="160"></el-table-column>
            <el-table-column prop="actualApproverName" label="实际审批人" align="center" width="120"></el-table-column>
            <el-table-column prop="createByNickname" label="创建人" align="center" width=""></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column>
            <el-table-column prop="updateByName" label="更新人" align="center" width="100"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间" align="center" width="160"></el-table-column>
            <el-table-column prop="" label="操作" align="center" width="150">
                <template slot-scope="{ row, $index }">
                    <el-button type="text" size="mini" @click="examineEvent(row.id)">详情</el-button>
                    <el-button type="text" size="mini" style="margin-right:10px;" :disabled="row.state == 1" @click="editEvent(row.id)">编辑</el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="deleteApproval(row.id)">
                      <el-button type="text" size="mini" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="content-footer">
        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,40,80,100,200]" :page-size="pageSize" background layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
  import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
  import { formatDate } from "@/utils/toosls";
  import { reqSupplierDemandList } from "@/api/purchaseDemand.js";
  import { startProgramWitApplicationId } from "@/utils/jingzhi.js";
  export default {
    name:"purchasingDemand",  //采购需求二开
    components:{
      TableHeadFilter
    },
    data() {
      return {
        formData:{
          
        },
        tableData:[],
        currentPage:1,
        pageSize:20,
        total:0,
        tableLoading:false,
        exportBtnLoading:false,
        tableMaxHeight:450
      }
    },
    mounted(){
      this.getApprovalList();
      document.title = "采购需求二开";
      this.calculateTableMaxHeight();
      window.addEventListener("resize",this.calculateTableMaxHeight);
      //精致环境下进行自动旋转
      const isDevelopment = process.env.NODE_ENV === 'development';
      if(!isDevelopment){
        autoOrientation();
      }
    },
    beforeDestroy(){
      window.removeEventListener("resize",this.calculateTableMaxHeight);
    },
    methods:{
      getApprovalList(){
        const page = this.currentPage;
        const size = this.pageSize;
        const parameter = { currentPage:page,size,showType:"material" };
        this.tableLoading = true;
        reqSupplierDemandList(parameter).then(response => {
          if(response.data.code == 200){
            this.tableData = response.data.data.records;
            this.total = response.data.data.total;
          }
          console.log("分页获取审批列表api",response);
          this.tableLoading = false;
        }, error => {
          console.log("分页获取审批列表api",error);
          this.tableLoading = false;
        })
      },
      deleteApproval(approvalId){
        reqDelApproval(approvalId).then(response => {
          if(response.data.code === 200){
            this.$notify({title:"提示", message:"删除成功",type:"success",duration:2000});
            this.getApprovalList();
          }
          console.log('删除审批列表数据api',response);
        }, error => {
          this.$notify({title:"提示", message:"删除失败，请重试",type:"error",duration:2000});
          console.log('删除审批列表数据api',error);
        })
      },
      examineEvent(approvalId){
        this.$router.push({name:"PurchasingDemandUpdate",query:{approvalId:approvalId,status:0}});
      },
      editEvent(approvalId){
        this.$router.push({name:"PurchasingDemandUpdate",query:{approvalId:approvalId,status:1}});
      },
      handleCurrentChange(curPage){
        this.currentPage = curPage;
        this.getApprovalList();
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        this.getApprovalList();
      },
      calculateTableMaxHeight(){
        const dom = document.querySelector(".table-main");
        this.$nextTick(() => {
          this.tableMaxHeight = dom.offsetHeight - 10;
        })
      },
      //格式化时间
      formatDate(val,type){
        let date = new Date(val);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if(type === 0){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " " + this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
        } else if (type === 1){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day);
        } else if (type === 2){
            return this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
        } else if (type === 3){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " 00:00:00";
        } else if (type === 4){
          return year + "年" + this.addZero(month) + "月" + this.addZero(day) + "日";
        } else if (type === 5){
          return year + "-" + this.addZero(month) + "-" + "01";
        } else if (type === 6){
          return year + "年" + this.addZero(month) + "月";
        }
      },
      addZero(val){
        return val > 9 ? val : "0" + val;
      },
      //tableHeadFiler的change事件
      filterChangeEvent(parameter){
        const { state, filterField, selectedValue } = parameter;
        if(state === 'clear'){
          //清空操作
          if(this.formData[filterField] !== ""){
            this.formData[filterField] = "";
            this.search_btn();
          }
        }
        if(state === 'confirm'){
          //确定操作
          this.formData[filterField] = selectedValue;
          if(selectedValue !== ""){
            this.search_btn();
          }
        }
      },
      addEvent(){
        this.$router.push({name:"PurchasingDemandUpdate",query:{approvalId:null,status:2}});
      },
      //测试小程序跳转
      async methodTest(){
        const path = "/genieos/ams/supply-chain-collaboration/procurement-management/purchasing-demand/detail/27/detail";
        const res = await window.flutter_inappwebview.callHandler('startProgramWitApplicationId_v2', 'new.yk.genieos.ams.scc.procurement-management.purchasing-demand',path,'',true);
        console.log('跳转测试====>',res);
      }
    }
  }
  </script>
  
<style lang='scss' scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1%;
  box-sizing: border-box;
  user-select: none;

  .content-head{
    flex: 0.5;
    .form-item{
      margin-right: 2vw;
    }
  }
  .content-table{
    flex: 8;
    margin: 10px 0;
    .table-date{
      width: 100%;
      height: 2%;
      min-height: 15px;
      margin-bottom: 0.5%;
      display: flex;
      justify-content: right;
    }
    .table-main{
      width: 100%;
      height: 98%;
    }
  }
  .content-footer{
    flex: 0.5;
    display: flex;
    justify-content: flex-end;
  }
}
/*
::v-deep .el-table__header th {
  padding: 0;
}
::v-deep .el-table__row {
  margin-bottom: 15px;
}
::v-deep .el-table .el-table__cell{
  padding: 0;
}
*/
</style>